<template>
	
	<view class="content" :style="'height:'+windowHeight+'px'">
		<view class="tishi"  :style="'display:'+isShow2+';'">
			<view class="tishi__content">
				<view class="tishi__content__title">测试须知</view>
				<view class="tishi__content__text">1 依据个人真实感受选择，避免外界干扰，确保结果真实性。</view>
				<view class="tishi__content__text">2 测试没有时间限制，通常在30分钟内完成。</view>
				<view class="tishi__content__text">3 尽量避免重做上一题，相信你的第一选择就好。</view>
				<view class="tishi__content__text">4 根据你的实际想法选择选项，而不是根据你期望做法现在选项</view>
				<view class="tishi__content__text">4 人格类型没有好坏，只有不同。每一种人格类型都有其价值和优点，也有缺点和需要注意的地方。清楚地了解自己的人格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己人格中的劣势更好地和他人相处，更好地作重要的决策。</view>
				<view class="tishi__content__start" @click="start()">开始测试</view>
			</view>
			
		</view>
		<view :style="'display:'+isShow+';'">
			<view class="dati">
				<view class="dati__title">{{title}}</view>
				<view class="dati__pro">
					<view class="dati__pro__1">
						<view class="dati__pro__1__geshu">{{data.id}}</view>/{{showAllList}}
					</view>
					<viwe class="dati__pro__2">
						<u-line-progress :percentage=progress activeColor="#F56C6C" :showText="false"></u-line-progress>
					</viwe>
					<view class="dati__pro__3">
						{{progress}}%
					</view>
				</view>
				
				<view class="dati__timu">{{data.timu}}</view>
				<!-- @click="dati(1)" -->
				<view v-if="data.select == 1">
					<view class="dati__daanselect" :style="'background-color:'+selectBackgroupColor+';color:'+selectColor" @touchstart="handleTouchStart(1)" @touchend="handleTouchEnd(1)" >{{data.daan1}}</view>
				</view>
				<view v-else>
					<view class="dati__daan" :style="'background-color:'+selectBackgroupColor+';color:'+selectColor"  @touchstart="handleTouchStart(1)" @touchend="handleTouchEnd(1)">{{data.daan1}}</view>
				</view>
				<view v-if="data.select == 2">
					<view class="dati__daanselect" :style="'background-color:'+selectBackgroupColor2+';color:'+selectColor2"  @touchstart="handleTouchStart(2)" @touchend="handleTouchEnd(2)">{{data.daan2}}</view>
				</view>
				<view v-else>
					<view class="dati__daan" :style="'background-color:'+selectBackgroupColor2+';color:'+selectColor2"  @touchstart="handleTouchStart(2)" @touchend="handleTouchEnd(2)">{{data.daan2}}</view>
				</view>
				<view class="zhanwei"></view>
			</view>
			
			<view class="anniu" >
				<view class="anniu__prev" @click="pretTi()">上一题</view>
				 <block v-if="nextTiText == '查看结果'">
					<view class="anniu__next" @click="submit()">{{nextTiText}}</view>
				</block>
				<block v-else>
				</block>	
			</view>
		</view>
		
	</view>
</template>

<script>
	import unils from "../../unils/utils.js"
	import config from "../../common/config.js"
	export default {
		data() {
			return {
				windowHeight:600,
				data:"",
				current:0,
				progress:0,
				showAllList:0,
				list:[],
				nextTiText:'',
				selectColor:'',
				selectBackgroupColor:'',
				selectColor2:'',
				selectBackgroupColor2:'',
				title:'',
				isShow:'none',
				isShow2:'block',
			}
		},
		onLoad(options) {
			var systemInfo = uni.getSystemInfoSync();
			this.windowHeight = systemInfo.windowHeight;
			var num = options.num;
			// console.log(num);
			this.initData(num);
			
			
		},
		methods: {
			start(){
				this.isShow = 'block';
				this.isShow2 = 'none';
			},
			handleTouchStart(value) {
				if(value==1){
					this.selectBackgroupColor = "rgba(245,108,108,0.5)";
					this.selectColor = "#ffffff";
				} else {
					this.selectBackgroupColor2 = "rgba(245,108,108,0.5)";
					this.selectColor2 = "#ffffff";
				}
			},
			handleTouchEnd(value){
				var listLength = this.list.length;
				
				// console.log(this.current);
				if(this.current < (listLength)){
					setTimeout(() => {
						this.selectBackgroupColor = "";
						this.selectColor = "";
						this.selectBackgroupColor2 = "";
						this.selectColor2 = "";
					    this.list[this.current]['select'] = value;
					    if(this.current < (listLength-1)){
					    	this.current ++;
					    	this.data = this.list[this.current];
					    	// console.log(this.list);
					    	this.progress =  Math.round(100/listLength*(this.data.id));
					    	this.nextTiText = '';
					    } else {
					    	this.nextTiText = '查看结果';
					    }
					    //如果最后一道题已经选过，就直接显示查看结果按钮
					    if(this.list[listLength-1]['select'] != ''){
					    	this.nextTiText = '查看结果';
					    }
					}, 200); // 这里的数字是毫秒，60000毫秒等于1分钟
				} else {
					// if(this.current == (listLength-1)){
					// 	console.log('提交');
					// 	this.submit();
					// } else {
					// 	console.log('无数据');
					// }
					
				}
				console.log(this.current);
			},
			pretTi(){
				var listLength = this.list.length;
				// console.log(listLength);
				// console.log(this.current);
				if(this.current > 0){
					this.current --;
					this.data = this.list[this.current];
					this.progress = Math.round(100/listLength*(this.data.id));
					console.log('有数据'+this.progress);
					
				} else {
					
					console.log('无数据');
				}
				if(this.current == (listLength-1)){
					this.nextTiText = '查看结果';
				} else {
					this.nextTiText = '';
				}
				
				console.log(this.current);
			},
			nextTi(){
				var listLength = this.list.length;
				// console.log(listLength);
				// console.log(this.current);
				if(this.current < (listLength-1)){
					var pretData = this.list[this.current];
					if(unils.stringIsEmpty(pretData.select)){
						unils.costomShowToast('请先选择答案！');
						return;
					}
					this.current ++;
					this.data = this.list[this.current];
					this.progress =  Math.round(100/listLength*(this.data.id));
					
					
				} else {
				}
				if(this.current == (listLength-1)){
					this.nextTiText = '查看结果';
				} else {
					this.nextTiText = '';
				}
				console.log(this.current);
			},
			
			submit:function(){
				var result = "";
				// console.log(this.list);
				for(const element of this.list){
					// result[element.id] = element.select;
					var item = element.id + "_" + element.select;
					result = result + "-" + item;
				}
				// console.log(result);
				
				
				uni.navigateTo({
					url:"/pages/index/result?result="+result,
				})
				
				// var that = this;
				// // console.log('dddddddddddddddddddddd');
				// var result = new Array();
				// console.log(this.list);
				// for(const element of this.list){
				// 	result[element.id] = element.select;
				// }
				// console.log(result);
				// var params = {rs:result};
				// that.$http('xgcs.submit', params).then(res => {
				// 	if(res.code == 1){
						
				// 	} else if(res.code == 99){
				// 		// console.log('ddddddddddddd');
						
				// 	} else {
				// 	}
				// });
			},
			initData:function(num){
				var that = this;
				// console.log('dddddddddddddddddddddd');
				
				var params = {num:num};
				that.$http('xgcs.list', params).then(res => {
					if(res.code == 1){
						that.list = res.data.list;
						//初始化数据
						that.showAllList = that.list.length;
						that.data = that.list[that.current];
						that.progress =  Math.round(100/that.list.length);
						that.title = res.data.title;
						// that.isShow = 'block';
					} else if(res.code == 99){
						// console.log('ddddddddddddd');
						
					} else {
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "css/dati.scss";
</style>